<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择座位 - ${showtime.movie.title}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .booking-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1.5rem 0;
        }
        .screen {
            background: #333;
            color: white;
            text-align: center;
            padding: 1rem;
            margin: 2rem 0;
            border-radius: 10px;
            position: relative;
        }
        .screen::before {
            content: '';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 20px;
            background: linear-gradient(to bottom, #666, #333);
            border-radius: 10px 10px 0 0;
        }
        .seat-map {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .seat-row {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
            align-items: center;
        }
        .row-label {
            width: 30px;
            text-align: center;
            font-weight: bold;
            color: #666;
        }
        .seat {
            width: 35px;
            height: 35px;
            margin: 2px;
            border: 2px solid #ddd;
            border-radius: 8px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }
        .seat.available {
            background: #28a745;
            color: white;
            border-color: #28a745;
        }
        .seat.available:hover {
            background: #218838;
            transform: scale(1.1);
        }
        .seat.selected {
            background: #007bff;
            color: white;
            border-color: #007bff;
            transform: scale(1.1);
        }
        .seat.booked {
            background: #dc3545;
            color: white;
            border-color: #dc3545;
            cursor: not-allowed;
        }
        .seat.vip {
            border-color: #ffc107;
        }
        .seat.vip.available {
            background: #ffc107;
            color: #333;
        }
        .legend {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin: 2rem 0;
            flex-wrap: wrap;
        }
        .legend-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .legend-seat {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            border: 2px solid;
        }
        .booking-info {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-top: 2rem;
        }
        .auto-assign-section {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        .btn-book {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            border: none;
            border-radius: 10px;
            padding: 12px 30px;
            font-weight: 600;
        }
        .btn-auto {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 10px;
            padding: 12px 30px;
            font-weight: 600;
        }
    </style>
</head>
<body class="bg-light">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand fw-bold text-primary" href="${pageContext.request.contextPath}/movies">
                <i class="fas fa-film me-2"></i>影院订票系统
            </a>
            
            <div class="navbar-nav ms-auto">
                <div class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        <i class="fas fa-user me-1"></i>${sessionScope.user.username}
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/orders">
                            <i class="fas fa-ticket-alt me-2"></i>我的订单
                        </a></li>
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/logout">
                            <i class="fas fa-sign-out-alt me-2"></i>退出登录
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 订票信息头部 -->
    <section class="booking-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h3><i class="fas fa-ticket-alt me-2"></i>${showtime.movie.title}</h3>
                    <div class="mt-2">
                        <span class="me-4">
                            <i class="fas fa-building me-1"></i>${showtime.cinema.name}
                        </span>
                        <span class="me-4">
                            <i class="fas fa-door-open me-1"></i>${showtime.hall.name}
                        </span>
                        <span class="me-4">
                            <i class="fas fa-calendar me-1"></i>
                            <fmt:formatDate value="${showtime.showDate}" pattern="MM月dd日"/>
                        </span>
                        <span>
                            <i class="fas fa-clock me-1"></i>
                            <fmt:formatDate value="${showtime.showTime}" pattern="HH:mm"/>
                        </span>
                    </div>
                </div>
                <div class="col-md-4 text-md-end">
                    <div class="fs-4 fw-bold">¥${showtime.price}/张</div>
                    <div>余票 ${showtime.availableSeats} 张</div>
                </div>
            </div>
        </div>
    </section>

    <div class="container mt-4">
        <!-- 返回按钮 -->
        <div class="mb-3">
            <a href="${pageContext.request.contextPath}/showtimes?movieId=${showtime.movieId}" 
               class="btn btn-outline-primary">
                <i class="fas fa-arrow-left me-1"></i>返回场次选择
            </a>
        </div>

        <!-- 错误信息 -->
        <c:if test="${not empty error}">
            <div class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>${error}
            </div>
        </c:if>

        <!-- 自动分配座位 -->
        <div class="auto-assign-section">
            <h5><i class="fas fa-magic me-2"></i>系统自动分配座位</h5>
            <p class="text-muted mb-3">让系统为您自动选择最佳座位，快速完成订票</p>
            
            <form action="${pageContext.request.contextPath}/user/booking" method="post" class="d-inline">
                <input type="hidden" name="action" value="autoAssign">
                <input type="hidden" name="showtimeId" value="${showtime.id}">
                
                <div class="row align-items-end">
                    <div class="col-md-3">
                        <label class="form-label">购票数量</label>
                        <select name="ticketCount" class="form-select" required>
                            <option value="1">1张</option>
                            <option value="2">2张</option>
                            <option value="3">3张</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-primary btn-auto">
                            <i class="fas fa-magic me-1"></i>自动分配
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 手动选择座位 -->
        <div class="seat-map">
            <h5 class="text-center mb-4">
                <i class="fas fa-couch me-2"></i>手动选择座位
            </h5>
            
            <!-- 屏幕 -->
            <div class="screen">
                <i class="fas fa-desktop me-2"></i>银幕
            </div>

            <!-- 座位图例 -->
            <div class="legend">
                <div class="legend-item">
                    <div class="legend-seat available" style="background: #28a745; border-color: #28a745;"></div>
                    <span>可选</span>
                </div>
                <div class="legend-item">
                    <div class="legend-seat selected" style="background: #007bff; border-color: #007bff;"></div>
                    <span>已选</span>
                </div>
                <div class="legend-item">
                    <div class="legend-seat booked" style="background: #dc3545; border-color: #dc3545;"></div>
                    <span>已售</span>
                </div>
                <div class="legend-item">
                    <div class="legend-seat vip available" style="background: #ffc107; border-color: #ffc107;"></div>
                    <span>VIP</span>
                </div>
            </div>

            <!-- 座位布局 -->
            <div id="seatLayout">
                <c:set var="currentRow" value="" />
                <c:forEach var="seat" items="${allSeats}">
                    <c:if test="${seat.rowNum != currentRow}">
                        <c:if test="${not empty currentRow}">
                            </div> <!-- 关闭上一行 -->
                        </c:if>
                        <div class="seat-row">
                            <div class="row-label">${seat.rowNum}</div>
                        <c:set var="currentRow" value="${seat.rowNum}" />
                    </c:if>
                    
                    <c:set var="isBooked" value="false" />
                    <c:forEach var="bookedId" items="${bookedSeatIds}">
                        <c:if test="${seat.id == bookedId}">
                            <c:set var="isBooked" value="true" />
                        </c:if>
                    </c:forEach>
                    
                    <c:choose>
                        <c:when test="${isBooked}">
                            <div class="seat booked" title="已售出">${seat.seatNum}</div>
                        </c:when>
                        <c:otherwise>
                            <div class="seat available ${seat.seatType == 'VIP' ? 'vip' : ''}" 
                                 data-seat-id="${seat.id}" 
                                 data-seat-name="${seat.rowNum}排${seat.seatNum}座"
                                 title="${seat.rowNum}排${seat.seatNum}座">
                                ${seat.seatNum}
                            </div>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
                <c:if test="${not empty currentRow}">
                    </div> <!-- 关闭最后一行 -->
                </c:if>
            </div>
        </div>

        <!-- 选座信息和提交 -->
        <div class="booking-info">
            <form action="${pageContext.request.contextPath}/user/booking" method="post" id="manualBookingForm">
                <input type="hidden" name="action" value="manualSelect">
                <input type="hidden" name="showtimeId" value="${showtime.id}">
                
                <div class="row">
                    <div class="col-md-8">
                        <h6>已选座位：</h6>
                        <div id="selectedSeats" class="mb-3">
                            <span class="text-muted">请选择座位</span>
                        </div>
                        
                        <div class="text-muted small">
                            <i class="fas fa-info-circle me-1"></i>
                            每人最多可购买3张电影票
                        </div>
                    </div>
                    
                    <div class="col-md-4 text-md-end">
                        <div class="mb-2">
                            <span>票数：</span>
                            <span id="ticketCount" class="fw-bold">0</span>张
                        </div>
                        <div class="mb-3">
                            <span>总价：¥</span>
                            <span id="totalPrice" class="fw-bold text-danger">0.00</span>
                        </div>
                        
                        <button type="submit" class="btn btn-success btn-book" id="submitBtn" disabled>
                            <i class="fas fa-shopping-cart me-1"></i>确认订票
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            const seatPrice = ${showtime.price};
            let selectedSeats = [];
            
            // 座位点击事件
            $('.seat.available').click(function() {
                const seatId = $(this).data('seat-id');
                const seatName = $(this).data('seat-name');
                
                if ($(this).hasClass('selected')) {
                    // 取消选择
                    $(this).removeClass('selected');
                    selectedSeats = selectedSeats.filter(seat => seat.id !== seatId);
                } else {
                    // 选择座位
                    if (selectedSeats.length >= 3) {
                        alert('最多只能选择3个座位');
                        return;
                    }
                    
                    $(this).addClass('selected');
                    selectedSeats.push({
                        id: seatId,
                        name: seatName
                    });
                }
                
                updateBookingInfo();
            });
            
            // 更新订票信息
            function updateBookingInfo() {
                const ticketCount = selectedSeats.length;
                const totalPrice = (ticketCount * seatPrice).toFixed(2);
                
                $('#ticketCount').text(ticketCount);
                $('#totalPrice').text(totalPrice);
                
                if (ticketCount > 0) {
                    const seatNames = selectedSeats.map(seat => seat.name).join('、');
                    $('#selectedSeats').html('<span class="badge bg-primary me-1">' + seatNames + '</span>');
                    $('#submitBtn').prop('disabled', false);
                    
                    // 添加隐藏的座位ID输入框
                    $('#manualBookingForm input[name="seatIds"]').remove();
                    selectedSeats.forEach(seat => {
                        $('#manualBookingForm').append('<input type="hidden" name="seatIds" value="' + seat.id + '">');
                    });
                } else {
                    $('#selectedSeats').html('<span class="text-muted">请选择座位</span>');
                    $('#submitBtn').prop('disabled', true);
                    $('#manualBookingForm input[name="seatIds"]').remove();
                }
            }
        });
    </script>
</body>
</html>
